<template>
	<backHeader backname="加工单">
		<div>
			<orderListHeader title="单据信息">
				<li>
					加工单号：<span>{{ info.order_sn }}</span>
				</li>
				<li>
					工艺名称：<span>{{ info.formula.name }} </span>
				</li>
				<li>
					加工状态：<span>{{ status_list[info.status] }} </span>
				</li>
				<li>
					创建日期：<span>{{ parseTime(info.created_at) }} </span>
				</li>
				<li>
					成品：<span>{{ info.goods.name }} </span>
				</li>
				<li>
					加工数量：<span>{{ info.process_num }} </span>
				</li>
				<li>
					已加工数量：<span>{{ info.processed_num }} </span>
				</li>
				<li>
					未加工数量：<span>{{ info.processing_num }} </span>
				</li>
				<li class="main_w100">
					工艺说明：<span>{{ info.formula.remark }} </span>
				</li>
			</orderListHeader>
			<Table>
				<template v-slot:Title> 原料信息 </template>
				<template v-slot:Table>
					<el-table
						ref="multipleTable"
						:data="info.list"
						v-loading="loading"
						element-loading-text="加载中"
						fit
						highlight-current-row
					>
						<el-table-column
							label="原料名称"
							prop="name"
							class-name="main_hei"
						/>
						<el-table-column
							label="单位"
							prop="spu_unit"
							class-name="main_hei"
						/>
						<el-table-column label="数量" prop="num" class-name="main_hei" />
					</el-table>
				</template>
			</Table>
			<Table>
				<template v-slot:Title> 领取记录 </template>
				<template v-slot:Table>
					<el-table
						ref="multipleTable"
						:data="received"
						element-loading-text="加载中"
						fit
						highlight-current-row
					>
						<el-table-column
							label="出库单号"
							prop="order_sn"
							class-name="main_hei"
						>
							<template slot-scope="scope">
								{{ scope.row.order_sn }}
								<i
									class="el-icon-document-copy"
									@click="handleCopy(scope.row.order_sn)"
								></i>
							</template>
						</el-table-column>
						<el-table-column
							label="出库时间"
							prop="operate.name"
							class-name="main_hei"
						>
							<template slot-scope="scope">
								{{ parseTime(scope.row.created_at) }}
							</template>
						</el-table-column>
					</el-table>
				</template>
			</Table>
			<Table>
				<template v-slot:Title> 成品入库记录 </template>
				<template v-slot:Table>
					<el-table
						ref="multipleTable"
						:data="storage"
						v-loading="loading"
						element-loading-text="加载中"
						fit
						highlight-current-row
					>
						<el-table-column
							label="入库单号"
							prop="order_sn"
							class-name="main_hei"
						>
							<template slot-scope="scope">
								{{ scope.row.order_sn }}
								<i
									class="el-icon-document-copy"
									@click="handleCopy(scope.row.order_sn)"
								></i>
							</template>
						</el-table-column>
						<el-table-column
							label="入库时间"
							prop="operate.name"
							class-name="main_hei"
						>
							<template slot-scope="scope">
								{{
									scope.row.storage_time
										? parseTime(scope.row.storage_time)
										: ""
								}}
							</template>
						</el-table-column>
					</el-table>
				</template>
			</Table>
			<Table>
				<template v-slot:Title> 余料入库记录 </template>
				<template v-slot:Table>
					<el-table
						ref="multipleTable"
						:data="last_storage"
						element-loading-text="加载中"
						fit
						highlight-current-row
					>
						<el-table-column
							label="入库单号"
							prop="order_sn"
							class-name="main_hei"
						>
							<template slot-scope="scope">
								{{ scope.row.order_sn }}
								<i
									class="el-icon-document-copy"
									@click="handleCopy(scope.row.order_sn)"
								></i>
							</template>
						</el-table-column>
						<el-table-column label="入库时间" class-name="main_hei">
							<template slot-scope="scope">
								{{ parseTime(scope.row.created_at) }}
							</template>
						</el-table-column>
					</el-table>
				</template>
			</Table>

			<!-- <orderListHeader title="余料入库记录">
			<li>入库单号：<span>nihao </span></li>
			<li>入库时间：<span>nihao </span></li>
		</orderListHeader> -->

			<Table>
				<template v-slot:Title> 生命周期 </template>
				<template v-slot:Table>
					<el-table
						ref="multipleTable"
						:data="logs"
						element-loading-text="加载中"
						fit
						highlight-current-row
					>
						<el-table-column
							label="管理员"
							prop="admin.name"
							class-name="main_hei"
						/>
						<el-table-column
							label="操作"
							prop="operate.name"
							class-name="main_hei"
						/>
						<el-table-column label="内容" prop="content" class-name="main_hei">
							<template slot-scope="scope">
								<div
									v-for="(content, index) in scope.row.content"
									:key="index"
									class="marginTop5 marginBottom5"
								>
									{{ content }}
								</div>
							</template>
						</el-table-column>
						<el-table-column label="IP" prop="ip" class-name="main_hei" />
						<el-table-column
							label="时间"
							prop="created_at"
							class-name="main_hei"
						>
							<template slot-scope="scope">{{
								parseTime(scope.row.created_at)
							}}</template>
						</el-table-column>
					</el-table>
				</template>
			</Table>
		</div>
	</backHeader>
</template>
<script>
	import backHeader from "@/components/OrderSeePage/backHeader.vue";
	import Table from "@/components/OrderSeePage/table.vue";
	import orderListHeader from "./components/orderListSeeHeader.vue";
	import { parseTime, exportMethod, getNowMonth } from "@/utils/index";
	import { process_getinfo } from "@/api/sorting/processOrder";
	export default {
		components: {
			backHeader,
			orderListHeader,
			Table,
		},
		data() {
			return {
				parseTime,
				logs: [],
				id: "",
				info: {
					formula: {},
					goods: {},
					list: [],
				},
				received: [],
				storage: [],
				last_storage: [],
				status_list: [],
				loading: false,
			};
		},
		created() {
			if (this.$route.params) {
				this.id = this.$route.params.id;
			}
			this.process_getinfo();
		},
		methods: {
			process_getinfo() {
				this.loading = true;
				const data = { id: this.id };
				process_getinfo(data).then((res) => {
					if (res.errcode == 0) {
						res.data.logs.map((e) => {
							if (e.content) {
								e.content = JSON.parse(e.content);
							}
						});
						res.data.info.list.map((e) => {
							e.name = `${e.goods.name}【${e.spu.spu_name.title}】`;
							e.spu_unit = `${e.spu.spu_unit.title}`;
						});
						this.logs = res.data.logs;
						this.info = res.data.info;
						this.received = res.data.received;
						this.storage = res.data.storage;
						this.last_storage = res.data.last_storage;
						this.status_list = res.data.status_list;
					} else {
						this.$message.error(res.errmsg);
					}
					this.loading = false;
				});
			},
			handleCopy(order_sn) {
				if (!order_sn) {
					return;
				}
				this.copyToClipboard(order_sn); // 需要复制的文本内容
				this.$message.success(`${order_sn},复制成功！`);
			},
			// 点击复制到剪贴板函数
			copyToClipboard(content) {
				if (window.clipboardData) {
					window.clipboardData.setData("text", content);
				} else {
					(function (content) {
						document.oncopy = function (e) {
							e.clipboardData.setData("text", content);
							e.preventDefault();
							document.oncopy = null;
						};
					})(content);
					document.execCommand("Copy");
				}
			},
		},
	};
</script>
<style lang='scss' scoped></style>
